<template>
  <div
    class="tree"
    :class="isChildren(item) ? (is ? 'isShow' : 'isShowHove') : ''"
    @click.stop="is = !is"
    :style="{
      'margin-left': '20px',
      'border-left': data[index + 1] ? `1px solid ${lineClolr}` : 'none',
      height: `100%`,
    }"
  >
    <div class="child-box">
      <div
        class="labelChild"
        :style="
          !data[index + 1]
            ? `border-left: 1px solid ${lineClolr}`
            : 'border-left:none'
        "
      ></div>
      <span
        :style="{
          color: lineClolr,
        }"
        >—</span
      >
      <slot name="treeIcon" v-if="isChildren(item)"></slot>
      <span class="treeFont">{{ item[config.lable] }}</span>
    </div>

    <indexItem
      :config="config"
      :data="item.children"
      :index="indexChild"
      :item="child"
      v-for="(child, indexChild) in item.children"
      :key="indexChild"
    >
      <template #treeIcon>
        <slot name="treeIcon"></slot>
      </template>
    </indexItem>
  </div>
</template>

<script setup name="Index">
const props = defineProps({
  config: {
    type: Object,
    default: {
      children: 'children',
      lable: 'lable',
      value: 'value',
    },
  },
  item: {
    type: Object,
    default: () => {},
  },
  data: {
    type: Array,
    default: () => [],
  },
  index: {
    type: Number,
    default: 0,
  },
  lineClolr: {
    type: String,
    default: '#999093',
  },
})

// 整体高度
const heightLength = ref(0)
// 判断是否有子集
const isChildren = (val) => {
  return val?.children && val.children.length > 0
}
// 递归
const lengthDiGui = (list) => {
  let length = 0
  for (var i = 0; i < list.length; i++) {
    const item = list[i]
    if (item?.children) {
      length += item?.children.length
      if (item?.children.length > 0) lengthDiGui(item.children)
    } else {
      length = 1
    }
  }
  return length
}

// 计算整体高度
const childrenLength = (val) => {
  heightLength.value = 0
  if (val?.children) {
    heightLength.value += (val?.children.length + 1 * 30) / 16
  }
  // heightLength.value = 0
  // if (val?.children?.length) heightLength.value += (lengthDiGui(val.children) * 30) / 16
  // :style="{
  //       height: `${childrenLength(item)}rem`
  //     }"
  return heightLength.value
}
const is = ref(false)
</script>

<style lang="scss" scoped>
.tree {
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;
  & .tree-left {
    height: 1.5rem;
  }
}
// 是否收起
.isShow {
  height: 1.5625rem !important;
}
// 子集
.child-box {
  display: flex;
  justify-self: center;
  align-items: center;
  position: relative;
  height: 1.875rem;
  border: none;
}
// 定位线（补充线）
.labelChild {
  position: absolute;
  height: 1.3125rem;
  left: 0;
  top: -5px;
  border-left: 1px solid #000;
}
// 图标样式
img {
  width: 1.9375rem;
  height: 1.9375rem;
}
// 文字样式
.treeFont {
  margin-left: 2px;
  font-size: 12px;
}
</style>
